<template>
  <view>
    <nav-bar></nav-bar>
    <!-- 主体表单 -->
    <view class="main">
      <!-- <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view> -->
      <view class="title_des">欢迎使用蛋糕甜心APP</view>
      <view class="item">
        <image
          class="login_image"
          src="../../static/login/userName.png"
        ></image>
        <input
          class="main-input"
          type="number"
          v-model.trim="userInfo.username"
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>
      <view style="margin-top: 8px"></view>
      <view style="margin-top: 8px"></view>
      <view class="item">
        <image
          class="login_image"
          src="../../static/login/password.png"
        ></image>
        <view class="type">
          <input
            v-model.trim="userInfo.password"
            class="main-input-code"
            maxlength="20"
            type="password"
            placeholder="请设置密码"
          />
        </view>
      </view>
    </view>
    <view class="btn_login" @click="userRegister">注册</view>
    
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '', //用户/电话
        password: '', //密码
      },
    }
  },
  methods: {
    // 用户注册
    async userRegister() {
      const { showAgree, userInfo } = this
      // 验证
      // if (!showAgree) {
      //   return uni.showToast({
      //     title: '请勾选同意协议',
      //     duration: 2000,
      //     icon: 'none',
      //   })
      // }
      if (!userInfo.username || !userInfo.password) {
        return uni.showToast({
          title: '请完整填写表单信息',
          duration: 2000,
          icon: 'none',
        })
      }

      const registerData = await this.$post('/1.1/users', {
        ...userInfo,
        isUser: true,
      })
      if (registerData.code === 202) {
        uni.showToast({
          title: '手机号已存在',
          duration: 2000,
          icon: 'none',
        })
      } else {
        uni.showToast({
          title: '注册成功',
          duration: 2000,
          icon: 'none',
        })
        uni.navigateTo({
          url: '/pages/personal/login',
        })
      }
    },
  },
}
</script>

<style>
@import url('../../static/css/icon.css');
@import url('../../static/css/main.css');

page {
  padding-top: 240rpx;
}
.title_des {
  font-weight: bold;
  color: #0055b8;
  font-size: 22px;
  margin-bottom: 32px;
}

.login_icon_wx {
  color: #999999;
  border: none;
}

.type {
  display: flex;
  margin-left: 16px;
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}

.weixinLogin {
  color: #999999;
  text-align: center;
  font-size: 12px;
  margin-top: 60px;
}

.footer_des {
  color: #666666;
  text-align: center;
  font-size: 14px;
  margin-top: 40px;
}

.getCode {
  font-size: 14px;
  margin-left: 40px;
  color: #0055b8;
}

.item {
  line-height: 40px;
  display: flex;
}

.login_image {
  margin-top: 8px;
  width: 20px;
  height: 25px;
}

.main-input {
  font-size: 14px;
  margin-left: 16px;
  border-bottom: 1px solid #eeeeee;
  height: 40px;
  line-height: 40px;
}

.main-input-code {
  width: 70%;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}

.btn_login {
  color: #ffffff;
  font-size: 16px;
  width: 250px;
  height: 40px;
  background: #0055b8;
  border-radius: 8px;
  line-height: 40px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 45px;
}

.main-input {
  flex: 1;
  text-align: left;
  font-size: 28 upx;
  padding-right: 10 upx;
  margin-left: 20 upx;
}
</style>
